<template>
	<view>
		<d-tab2 :list="tabList" :defaultCurr="defaultCurr" @tabClick="tabClick"></d-tab2>
		<view class="orderlist">
			<view class="orderlist-item" v-for="item in list" @click="detail(item)">
				<view class="top">
					<view class="left">订单号:{{item.order_no}}</view>
					<view class="right" v-if="item.order_status == 'paying'">等待支付</view>
					<view class="right" v-else-if="item.order_status == 'payed'">待发货</view>
					<view class="right" v-else-if="item.order_status == 'transit'">待收货</view>
					
				</view>
				<view class="skuItem" v-for="good in item.goods">
					<view class="cell01">
						<image :src="good.image"></image>
					</view>
					<view class="cell02">
						<view class="name">{{good.goods_name}}</view>
						<!-- <view class="guige">
							<text>{{item.skuTitle}}</text>
						</view> -->
					</view>
					<view class="cell03">
						<view class="pricebox">
							<text class="priceicon">¥</text>
							<text class="pricetext">{{good.goods_price}}</text>
						</view>
						<view class="count"><text>×{{good.total_num}}</text></view>
					</view>
				</view>
			
				<view class="pricelist">
					<view class="left"></view>
					<view class="right">
<!-- 						<view class="price1">优惠：¥69.90</view>
 -->						
<!-- 						<view class="price2">快递：¥20.00</view>
 -->						<view class="price3">总价：<text>¥{{item.total_price}}</text></view>
					</view>
				</view>
				<view class="btnlist">
					<view class="left"></view>
					<view class="right">
						<button class="grey" v-if="item.status ==2">查看物流</button>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import dTab2 from '@/components/dTab2.vue'
	export default{
		components:{
			dTab2
		},
		data() {
			return {
				defaultCurr: '-1',
				tabList: [{
					name: '全部',
					status: '-1'
				},{
					name: '待发货',
					status: '1'
				},{
					name: '待收货',
					status: '2'
				}],
				status:-1,
				pageIndex:1,
				pageSize:20,
				list:[],
				isLastPage:false
			}
		},
		
		onShow(){
			
			this.pageIndex = 1;
			this.list = [];
			this.getList();
			
		},
		
		onReachBottom() {
			
			console.info("==onReachBottom===="+this.isLastPage);
			if(this.isLastPage) return;
			this.pageIndex+= 1;
			this.getList();
			
		},
		
		methods:{
			
			detail(item){
			
				uni.navigateTo({
					url:'../index/orderDetail?orderNo='+item.order_no
				})
			},
			
			tabClick(status) {
				this.defaultCurr = status;
				this.pageIndex = 1;
				this.status = status;
				this.list = [];
				this.getList();
			},
			getList(){
				let param = {
					  status: this.status,
					  pageIndex: this.pageIndex,
					  pageSize:this.pageSize
				}
				let that = this;
				this.$api.getOrderList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							that.isLastPage = true;
						} else {
							that.isLastPage = false;
						}
					}
				
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #EEEEEE;
	}
	.orderlist{
		margin-top: 20rpx;
		.orderlist-item{
			border-radius: 10rpx;
			margin:0 20rpx 20rpx 20rpx;
			background: #FFFFFF;
			.top{
				display: flex;
				padding:20rpx 26rpx 0;
				.left{
					flex: auto;
					font-size: 26rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
				.right{
					font-size: 24rpx;
					color: $uni-color-primary;
				}
			}
			.skuItem{
				padding: 32rpx 26rpx 0 26rpx;
				display: flex;
				.cell01{
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
					margin-right: 20rpx;
				}
				.cell02{
					.name{
						font-size: 28rpx;
						color: #1A1A1A;
						margin:0 30rpx 30rpx 0;
					}
					.guige{
						text{
							display: inline-block;
							color: #9A9A9A;
							font-size: 24rpx;
							padding: 0 30rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							border-radius: 26rpx;
							background:#EFEFEF;
						}
					}
				}
				.cell03{
					.pricebox{
						.priceicon{
							font-size:28rpx;
							color: #1A1A1A;
							margin-right: 5rpx;
						}
						.pricetext{
							font-size: 28rpx;
							color: #1A1A1A;
						}
					}
					.count{
						margin-left: 23rpx;
						font-size: 28rpx;
						color: #8E8E8E;
						text-align: right;
					}
				}
			}
			.pricelist{
				display: flex;
				padding: 20rpx 30rpx 0;
				.left{
					flex: auto;
				}
				.right{
					display: flex;
					.price1{
						font-size: 24rpx;
						color: #9A9A9A;
						vertical-align: middle;
						margin-right: 20rpx;
					}
					.price2{
						font-size: 24rpx;
						color: #9A9A9A;
						vertical-align: middle;
						margin-right: 20rpx;
					}
					.price3{
						color: #1A1A1A;
						font-size: 24rpx;
						vertical-align: middle;
						text{
							vertical-align: middle;
							font-size: 32rpx;
						}
					}
				}
			}
			.errortext{
				font-size: 24rpx;
				color: #EB1A12;
				margin: 0 30rpx;
			}
			.btnlist{
				display: flex;
				padding:30rpx 20rpx;
				.left{
					flex: auto;
				}
				.right{
					display: flex;
					.grey{
						border: 1rpx solid #BFBFBF;
						color: #666666;
					}
					.red{
						border: 1rpx solid #EB1A12;
						color: #EB1A12;
					}
					button{
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						background: #FFFFFF;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
					button::after{
						border: none;
					}
				}
			}
		}
	}
</style>
